import React,{Component} from 'react'
import PropTypes from 'prop-types'
import {is,fromJS} from 'immutable'
import TouchableOpacity from '@/components/TouchableOpacity/TouchableOpacity.jsx'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import './alert.less'
export default class PublicAlert extends Component{
  constructor(props){
    super(props)
  }
  static propTypes={
    closeAlert:PropTypes.func.isRequired,
    alertTip:PropTypes.string.isRequired,
    alertStatus:PropTypes.bool.isRequired
  }
  FirstChild = () =>{
    return null;
  }
  confirm = () =>{
    this.props.closeAlert()
  }
  
  render = () =>{
    return(
      <ReactCSSTransitionGroup
      //component={this.FirstChild}
      transitionName='alert'
      transitionEnterTimeout={300}
      transitionLeaveTimeout={300}
      transitionAppearTimeout={300}
      //transitionAppear={true}
      //componentWillAppear={true}
      >
      {
        this.props.alertStatus && 
        <div className="alert-con">
          <div className="alert-context">
            <div className="alert-content-detail">{this.props.alertTip}</div>
            
            <TouchableOpacity className="confirm-btn" clickCallBack={this.confirm}></TouchableOpacity>
          </div>
        </div>
      }
      </ReactCSSTransitionGroup>
    )
  }
}